/* 全部样式 */
*{
    /* 宽度包含边框 */
    box-sizing: border-box;
}
/* 最外层的边框 */
.calc {
    margin: 10px;
    width: 234px;
    border: 2px solid #000;
    /* 边框圆角 */
    border-radius: 5px;
}
/* 屏幕 */
.calc-screen {
    background-color: #292a29;
    height: 80px;
    /* line-height=height:元素居中 */
    line-height: 80px;
    /* 运算的结果居右 */
    text-align: right;
    font-size: 40px;
    font-weight: bold;
    /* 上下 左右 */
    padding: 0 10px;
    color: #fff;
    /* 溢出隐藏：该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位 */
    overflow: hidden;
}

.calc button {
    display: inline-block;
    width: 25%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    border-color: #000;
    /* 边框样式 */
    border-style: solid;
    border-width: 0 1px 1px 0;
    color: #fff;
    /* 鼠标样式 */
    cursor: pointer;
    background-color: #5e5f5e;;
}
/* 占据屏幕的一半 */
.calc button.zero {
    width: 50%;
}
.calc button.ctrl{
    background-color: #3e3f3e;
}
.calc button.exp{
    background-color: #fd8d0e;
}